<template>
	<div>
		<el-dialog :title="titleMap[props.type]" v-model="locaVisible" width="800px">
			<template #footer>
				<el-button @click="close">取消</el-button>
				<el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
			</template>
			<el-form ref="formRef" :model="form">
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item
							label="菜单名称"
							prop="name"
							:label-width="'120px'"
							:rules="[{ required: true, message: '请输入菜单名称!' }]"
						>
							<el-input v-model="form.name" placeholder="请输入菜单名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="菜单状态" prop="status" :label-width="'120px'">
							<el-radio-group v-model="form.status">
								<el-radio :label="1">启用</el-radio>
								<el-radio :label="0">禁用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item
							label="路由名称"
							prop="routerName"
							:label-width="'120px'"
							:rules="[{ required: true, message: '路由名称!' }]"
						>
							<el-input
								v-model="form.routerName"
								placeholder="请输入路由名称"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="路由路径"
							prop="routerPath"
							:label-width="'120px'"
							:rules="[{ required: true, message: '路由路径!' }]"
						>
							<el-input
								v-model="form.routerPath"
								placeholder="请输入路由路径"
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="菜单排序" :label-width="'120px'">
							<el-input-number v-model="form.order" :min="0"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="菜单图标" :label-width="'120px'">
							<el-select v-model="form.icon">
								<el-option
									v-for="(icon, index) in IconDatas"
									:key="index"
									:label="icon"
									:value="icon"
								>
									<el-space :size="6">
										<component :is="icon" style="font-size: 16px" />
										<span>{{ icon }}</span>
									</el-space>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="父级菜单" prop="parent" :label-width="'120px'">
							<el-cascader
								v-model="form.parent"
								:options="menuData"
								:props="{ label: 'label', value: 'value', children: 'children' }"
								placeholder="请选择"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="隐藏菜单" :label-width="'120px'">
							<el-radio-group v-model="form.hidden">
								<el-radio :label="1">显示</el-radio>
								<el-radio :label="0">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { computed, defineComponent, ref, reactive } from 'vue';
import { HeartTwoTone } from '@ant-design/icons-vue';
import type { Form } from './form';
import { useIcon } from '@/hooks/common/useIcon';

const { IconDatas } = useIcon();
defineComponent({ name: 'MenuFormModal' });
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	type: {
		type: String,
		default: 'add',
	},
	id: {
		type: [Number, String],
		default: 0,
	},
});
const emits = defineEmits(['update:modelValue']);
const locaVisible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emits('update:modelValue', val);
	},
});
const titleMap = {
	add: '新增菜单',
	edit: '编辑菜单',
	children: '新增子菜单',
};

// 获取菜单项
const menuData = ref<Array<any>>([
	{
		label: '根节点',
		value: 0,
	},
	{
		value: 1,
		label: 'Zhejiang',
		children: [
			{
				value: 11,
				label: 'Hangzhou',
				children: [
					{
						value: 111,
						label: 'West Lake',
					},
				],
			},
		],
	},
]);

// 表单
const formRef = ref();
const loading = ref<boolean>(false);
const form = reactive<Form>({
	name: '',
	status: 1,
	routerName: '',
	routerPath: '',
	order: 1,
	icon: '',
	parent: [0],
	hidden: 1,
});

// 获取菜单数据
// #TODO: 获取菜单数据,仅在type为children和edit时调用
// #TODO: type为children时需同步渲染表单中父级菜单
// #TODO: type为edit时需同步渲染表单中菜单信息

const handleSubmit = () => {
	loading.value = true;
	formRef.value
		.validateFields()
		.then((values: Form) => {
			console.log('Received values of form: ', values);
			//   console.log('formState: ', toRaw(form));
			//   visible.value = false;
			formRef.value.resetFields();
			//   console.log('reset formState: ', toRaw(formState));
		})
		.catch((error: any) => {
			console.log('error', error);
		});
	// console.log('submit');
	loading.value = false;
	// reset();
};
const reset = () => {
	formRef.value.resetFields();
};
const close = () => {
	locaVisible.value = false;
	reset();
};
</script>

<style scoped lang="scss">
.el-input-number {
	width: 100%;
}
</style>
